<div>
    <navbar sub-bar="true"/>
    <div class="container">
        <br>
        <div class="row">
            <form class="login-form col-lg-5 col-sm-12" @submit.prevent="login" method="post">
                <h1 class="text-left">Sign In</h1>
                <div v-if="loginErrormessage && loginErrormessage.length" class="alert alert-primary" role="alert">
                    {{loginErrormessage}}
                </div>
                <div class="form-group row">
                    <label for="" class=" col-form-label col-lg-3 col-sm-12 text-left">Email</label>
                    <div class="col-lg-9 col-sm-12">
                        <input v-model="user.username" type="text" class="form-control" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="" class="col-form-label col-sm-12 col-lg-3 text-left">Password</label>
                    <div class="col-lg-9 col-sm-12">
                        <input v-model="user.password" type="password" class="form-control" required>
                    </div>
                </div>
                <button class="btn btn-login offset-lg-3 btn-block col-sm-12 col-lg-9" type="submit">Sign In</button>
                <router-link :to="'/resetPassword'" tag="a">
                    <span class="login-forgot mt-2 mb-5">Forgot Your Password?</span>
                </router-link>
            </form>
            <div class="col-sm-2 d-none d-lg-block d-xl-block">
                <div class="split mx-auto"></div>
            </div>
            <div class="new-customer col-sm-12 col-lg-5">
                <h1 class="text-left">New Customer</h1>
                <router-link :to="'/account/create'" tag="button" class="btn btn-create-account btn-block col-sm-12 col-lg-10">Create an Account</router-link>
                <p class="new-customer-text mt-3">
                    Don't have a POP Commerce Account? Don't worry. It's easy, free and only takes a minute.
                </p>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Password Change Required</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="modal-body" @submit.prevent="changePassword" method="post">
                    <div v-if="responseMessage != null && responseMessage != ''" class="alert alert-primary" role="alert">
                        {{responseMessage}}
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label modal-text">Username *</label>
                        <div class="col-sm-7">
                            <input class="form-control" type="text" v-model="passwordInfo.username" required/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label modal-text">Old Password *</label>
                        <div class="col-sm-7">
                            <input class="form-control" type="password" v-model="passwordInfo.oldPassword" required/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label modal-text">New Password *</label>
                            <div class="col-sm-7">
                                <input class="form-control" type="password" v-model="passwordInfo.newPassword" required/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label modal-text">Confirm New Password *</label>
                        <div class="col-sm-7">
                            <input class="form-control" type="password" v-model="passwordInfo.newPasswordVerify" 
                                required/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-7 offset-sm-4">
                            <button type="submit" class="btn btn-continue account-btn">Change Password</button>
                            <br>
                            <a data-dismiss="modal" class="btn btn-link text-add col col-sm-9 offset-sm-1">Or Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <br>
    <footer-page style="margin-top: 15%;" :infoLink="false" />
</div>
